<template>
  <div class="select-seat-header-container-101">
    <nut-cell>
      <div class="content-box">
        <div class="content">
          <div class="left">
            <div class="title">{{ info?.filmName }}</div>
            <div class="desc">
              开场时间：{{ formatShowTime(info?.showTime) }}
            </div>
            <div class="desc">{{ info.cinemaName }}</div>
            <div class="desc">{{info.hallName }}  ({{ info.duration + '分钟' }})</div>
          </div>
          <div class="right">
            <div>
              <image style="width: 80px; height: 100px;border-radius: 3px;" :src="img"></image>
            </div>
          </div>
        </div>
      </div>
      <scroll-view :scroll-x="true">
        <div class="select-list">
          <div class="item" v-for="(item, index) in selectedSeat" :key="index">
            <div class="left">
              <div class="name">{{ item.seatNo }}</div>
              <div class="price">
                <nut-price
                  :price="formatPriceOrigin(item.areaId) / 100"
                  style="color: #5232b7"
                  size="small"
                  :decimal-digits="2"
                  :thousands="true"
                />
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </nut-cell>
  </div>
</template>
<script setup lang="ts">
import { toRefs, computed, ref } from "vue";
import moment from "moment";
import Taro from "@tarojs/taro";
const img = ref(Taro.getStorageSync("yinTu").image);
// 【格式化】开场时间
const formatShowTime = computed(() => {
  return (str) => {
    var formattedTime = moment.unix(str / 1000).format("YYYY-MM-DD HH:mm");
    return formattedTime;
  };
}); // 【格式化】散场时间
const props = defineProps({
  info: {
    type: Object,
    required: true,
  },
  selectedSeat: {
    type: Array,
    required: true,
  },
  arealist: {
    type: Array,
    required: true,
  },
});
// 格式话 获取原价
const formatPriceOrigin = computed(() => {
  return (id) => {
    return getOrPrice(id);
  };
});
//获取价格 根据分区
const getOrPrice = (id) => {
  if (arealist.value.length === 0) {
    // 无分区
    // return Number(res.price);
  } else {
    // 有分区
    const res: any = arealist.value.find((item: any) => {
      return item.regionName == id;
    });
    return Number(res.price);
  }
};
const { info, selectedSeat, arealist } = toRefs(props);
</script>
<style lang="scss">
.select-seat-header-container-101 {
  display: flex;
  flex-direction: column;
  padding: 0 25px;
  background: #fff;

  .nut-cell {
    display: flex;
    flex-direction: column;
  }

  .select-list {
    display: flex;
    flex-direction: row;
    margin-top: 20px;

    .item {
      background: #f6f8f9;
      display: flex;
      flex-direction: row;
      padding: 10px 20px;
      margin-right: 20px;
      border-radius: 10px;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 120px;

        .name {
          font-size: 24px;
          color: #858a99;
        }

        .price {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .nut-price {
            display: flex;
          }
        }
      }

      .right {
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: row;
    // height: 200px;
    width: 100%;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 35px;

      .title {
        font-weight: 500;
        color: #15181d;
        font-size: 32px;
      }

      .desc {
        color: #858a99;
        font-size: 24px;
        margin-top: 10px;
      }

      .title,
      .desc {
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .right {
      display: flex;
      flex-direction: row;
      align-items: center;

      .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }

      .distance {
        color: #858a99;
        font-size: 24px;

        .nut-price {
          color: #858a99;
        }
      }
    }
  }
}
</style>
